﻿{extend name="public:base" /}

{block name="css"}
<link href="__ADMIN__/css/style.css" rel="stylesheet">
<link href="/static/admin/css/plugins/jsTree/style.min.css" rel="stylesheet">
{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post" class="layui-form fairy-form">
                        <div class="box-item">
                            <div class="form-group row">
                                <h3 class="col-sm-2">用户注册模拟</h3>
                            </div>
                            <div class="box-item">
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">用户名</label>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control" name="username" value="用户">
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                            </div>

                            <div class="box-item">
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">会员等级</label>
                                    <div class="col-sm-2">
                                        <select name="level" class="form-control">
                                            <option value="1">游客</option>
                                            <option value="2">VIP</option>
                                            <option value="3">社区服务站</option>
                                            <option value="4">县区服务站</option>
                                            <option value="5">城市服务站</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                            </div>

                            <div class="box-item">
                                <div class="form-group row user_select">
                                    <label class="col-sm-2 col-form-label">上级用户</label>
                                    <div class="col-sm-2">
                                        <select class="form-control user_one" name="up_user_id[]">
                                            <option value="0">请选择</option>
                                            {volist name="user_list" id="vo"}
                                            <option value="{$vo.id}">{$vo.username}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                    <div class="col-sm-2">
                                        <select class="form-control user_two" name="up_user_id[]">
                                            <option value="0">请选择</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2">
                                        <select class="form-control user_three" name="up_user_id[]">
                                            <option value="0">请选择</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2">
                                        <select class="form-control user_four" name="up_user_id[]">
                                            <option value="0">请选择</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2">
                                        <select class="form-control user_five" name="up_user_id[]">
                                            <option value="0">请选择</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-primary" onclick="registerUser()">
                                    模拟注册
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <div class="form-group row">
                        <h3 class="col-sm-2">用户层级结构</h3>
                    </div>
                    <div class="form-group row">
                        <h5 class="col-sm-6">注：用户ID --- 用户名 --- 会员等级</h5>
                    </div>

                    <div id="jstree1">
                        <ul>
                            {volist name="user_list" id="vo"}
                            <li class="jstree-open">
                                {$vo.id} --- {$vo.username} --- {$vo.level|doUserLevel} --- {$vo.gear}
                                <ul>
                                    {notempty name="vo.son_user_list"}
                                    {volist name="vo.son_user_list" id="v"}
                                    <li>
                                        {$v.id} --- {$v.username} --- {$v.level|doUserLevel} --- {$v.gear}
                                        <ul>
                                            {notempty name="v.son_user_list"}
                                            {volist name="v.son_user_list" id="b"}
                                            <li>
                                                {$b.id} --- {$b.username} --- {$b.level|doUserLevel} --- {$b.gear}
                                                <ul>
                                                    {notempty name="b.son_user_list"}
                                                    {volist name="b.son_user_list" id="c"}
                                                    <li>
                                                        {$c.id} --- {$c.username} --- {$c.level|doUserLevel} --- {$c.gear}
                                                        <ul>
                                                            {notempty name="c.son_user_list"}
                                                            {volist name="c.son_user_list" id="d"}
                                                            <li>{$d.id} --- {$d.username} --- {$d.level|doUserLevel} --- {$d.gear}</li>
                                                            {/volist}
                                                            {/notempty}
                                                        </ul>
                                                    </li>
                                                    {/volist}
                                                    {/notempty}
                                                </ul>
                                            </li>
                                            {/volist}
                                            {/notempty}
                                        </ul>
                                    </li>
                                    {/volist}
                                    {/notempty}
                                </ul>
                            </li>
                            {/volist}
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

{/block}

{block name='js'}
<script src="/static/admin/js/plugins/jsTree/jstree.min.js"></script>
<script>
    var user_list = {$user_list_json};

    $(function () {
        $('#jstree1').jstree();
    })

    var one_user_index = 0;
    var two_user_index = 0;
    var three_user_index = 0;
    var four_user_index = 0;

    $('.user_one').change(function (){
        var user_id = $(this).val();
        one_user_index = $(this).get(0).selectedIndex;
        var two_user_option = '<option value="0">请选择</option>';
        if (user_list.length > 0) {
            user_list.forEach(function (val) {
                var son_user_list = val.son_user_list;
                for (var i = 0; i < son_user_list.length; i++) {
                    var son = son_user_list[i];
                    if (son.up_user_id == user_id) {
                        two_user_option += '<option value="' + son.id + '">' + son.username + '</option>';
                    }
                }
            })
        }

        $('.user_two').html(two_user_option);
        $('.user_three').html('<option value="0">请选择</option>');
        $('.user_four').html('<option value="0">请选择</option>');
        $('.user_five').html('<option value="0">请选择</option>');
    })

    $('.user_two').change(function () {
        var user_id = $(this).val();
        two_user_index = $(this).get(0).selectedIndex;
        var three_user_option = '<option value="0">请选择</option>';
        var use_user_list = user_list[one_user_index - 1].son_user_list;
        if (use_user_list.length > 0) {
            use_user_list.forEach(function (val) {
                var son_user_list = val.son_user_list;
                for (var i = 0; i < son_user_list.length; i++) {
                    var son = son_user_list[i];
                    if (son.up_user_id == user_id) {
                        three_user_option += '<option value="' + son.id + '">' + son.username + '</option>';
                    }
                }
            })
        }

        $('.user_three').html(three_user_option);
        $('.user_four').html('<option value="0">请选择</option>');
        $('.user_five').html('<option value="0">请选择</option>');
    })

    $('.user_three').change(function () {
        var user_id = $(this).val();
        three_user_index = $(this).get(0).selectedIndex;
        var four_user_option = '<option value="0">请选择</option>';
        var use_user_list = user_list[one_user_index - 1].son_user_list[two_user_index - 1].son_user_list;
        if (use_user_list.length > 0) {
            use_user_list.forEach(function (val) {
                var son_user_list = val.son_user_list;
                for (var i = 0; i < son_user_list.length; i++) {
                    var son = son_user_list[i];
                    if (son.up_user_id == user_id) {
                        four_user_option += '<option value="' + son.id + '">' + son.username + '</option>';
                    }
                }
            })
        }
        $('.user_four').html(four_user_option);
        $('.user_five').html('<option value="0">请选择</option>');
    })

    $('.user_four').change(function () {
        var user_id = $(this).val();
        four_user_index = $(this).get(0).selectedIndex;
        var five_user_option = '<option value="0">请选择</option>';
        var use_user_list = user_list[one_user_index - 1].son_user_list[two_user_index - 1].son_user_list[three_user_index - 1].son_user_list;
        if (use_user_list.length > 0) {
            use_user_list.forEach(function (val) {
                var son_user_list = val.son_user_list;
                for (var i = 0; i < son_user_list.length; i++) {
                    var son = son_user_list[i];
                    if (son.up_user_id == user_id) {
                        five_user_option += '<option value="' + son.id + '">' + son.username + '</option>';
                    }
                }
            })
        }
        $('.user_five').html(five_user_option);
    })


    // 保存
    function registerUser() {
        var formData = $('form').serialize();
        $.post("{:url('registerUser')}", formData, function (res) {
            layer.msg(res.msg);
            window.location.reload();
        }, 'JSON')
    }
</script>
{/block}
